<template>
    <div>
        <filterComponent v-model:filter-data="filterData" hideHead @doSearch="handleSearch" />
    </div>
    <el-card class="reset">
        <tableComponent class="set-height" theme="light" :table-header="tableHeader" :table-data="tableData"
            v-model:page-info="pageInfo" @pageChange="handlePageChange" @sort-change="sortMethod">
            <template #type>
                <el-table-column label="月单模式">
                    <template #default="scope">
                        <span>{{ typeName(scope.row.type) }}</span>
                    </template>
                </el-table-column>
            </template>
            <template #operationType>
                <el-table-column label="操作类型">
                    <template #default="scope">
                        <span :class="[`color-${scope.row.operationType}`]">{{
                            operationTypeName(scope.row.operationType) }}</span>
                    </template>
                </el-table-column>
            </template>
        </tableComponent>
    </el-card>
</template>
<script setup>
import { ref, watch, computed, onMounted } from 'vue'
import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import { getAddSubtractRecord } from '@/api/clients/signClient.ts'

const props = defineProps({
    companyId: {
        type: [Number, String]
    }
})

const filterData = ref({
    list: {
        queryTime: {
            name: '日期',
            prop: 'queryTime',
            value: '',
            placeholder: '请选择日期',
            type: 'date',
            dateType: 'date',
            handleFocus: (item) => {

            },
            handleChange: (item) => {

            }
        },
        operationType: {
            name: '操作类型',
            prop: 'operationType',
            value: '',
            placeholder: '请选择操作类型',
            type: 'select',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '加保',
                    value: 0
                },
                {
                    label: '减保',
                    value: 1
                },
                {
                    label: '撤销',
                    value: 2
                },
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            },
            handleFocus: (item) => {
            },
            handleChange: (item) => {
            }
        },
        type: {
            name: '月单模式',
            prop: 'type',
            value: '',
            placeholder: '请选择月单模式',
            type: 'select',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '灵活',
                    value: 3
                },
                {
                    label: '月单',
                    value: 4
                },
                {
                    label: '即时生效',
                    value: 5
                },
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            },
            handleFocus: (item) => {
            },
            handleChange: (item) => {
            }
        },
    },
    buttonList: [
    ]
})

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableHeader = ref([
    {
        label: '客户名称',
        prop: 'companyName',
    },
    {
        label: '商务负责人',
        prop: 'salesName',
    },
    {
        label: '月单模式',
        prop: 'type',
    },
    {
        label: '录入时间',
        prop: 'operationDate',
    },
    {
        label: '操作类型',
        prop: 'operationType',
    },
    {
        label: '人数',
        prop: 'total',
    },
    {
        label: '生效时间',
        prop: 'insurStartDate',
    },
])

const typeName = computed(() => {
    return (type) => {
        const cur = filterData.value.list.type.options.find(i => i.value === type)
        return cur.label
    }
})

const operationTypeName = computed(() => {
    return (type) => {
        const cur = filterData.value.list.operationType.options.find(i => i.value === type)
        return cur.label
    }
})

const tableData = ref([])

const createQuery = () => {
    const query = {}
    for (const key in filterData.value.list) {
        query[filterData.value.list[key].prop] = filterData.value.list[key].value
    }
    return query
}

const getData = () => {
    getAddSubtractRecord({
        ...createQuery(),
        pageSize: pageInfo.value.paseSize,
        pageNum: pageInfo.value.pageNum,
        companyId: props.companyId
    }).then(res => {
        tableData.value = res.list
        pageInfo.value.total = res.totalCount
    })
}

const sortMethod = (column) => {
    console.log(123, column)
}

const handleSearch = () => {
    console.log(1111)
    getData()
}

const handlePageChange = () => {
    console.log(3333)
    getData()
}

const toDetail = () => {
    console.log(2222)
}

watch(() => props.companyId, (newval) => {
    if (newval) {
        getData()
    }
}, {
    immediate: true
})
</script>
<style lang="scss" scoped>
.reset {
    margin-top: -16px;
}

.set-height {}

.color-0 {
    color: #00D679;
}

.color-1 {
    color: #FF7642;
}
</style>